<template>
  <div class="ClassifyView">
    <!-- 头部 -->
    <header class="header">
      <div class="left" @click="$router.back()"></div>
      <div class="h_title">{{ Classify_title }}</div>
    </header>
    <!-- 头部 -->

    <!-- todo 主编力荐 -->
    <div class="list1 l_type1 wrap" v-if="Classify_Good">
      <div class="title">
        <div class="left">
          <div class="logo"></div>
          <h3>{{ Classify_Good.moduleName }}</h3>
        </div>
        <div class="right">
          <h3>{{ Classify_Good.titleBar.rightText }}</h3>
          <div class="more" @click="bookSort(Classify_Good.books)"></div>
        </div>
      </div>
      <div class="content">
        <router-link
          class="item"
          v-for="(vl, i) in Classify_Good.books"
          :to="'/details?id=' + vl.bookId"
          v-show="i < 6"
          :key="vl.bookId"
        >
          <div class="img">
            <img :src="vl.imgUrl" alt="" />
          </div>
          <div class="text">
            <h3 class="txt-cut">{{ vl.bookName }}</h3>
            <p>{{ vl.authorName }}</p>
          </div>
        </router-link>
      </div>
    </div>
    <!-- todo 主编力荐 -->

    <!-- todo 新书 -->
    <div class="newlist wrap" v-if="Classify_NewBook">
      <div class="title">
        <div class="left">
          <div class="logo"></div>
          <h3>{{ Classify_NewBook.moduleName }}</h3>
        </div>
        <div class="right">
          <h3>{{ Classify_NewBook.titleBar.rightText }}</h3>
          <div class="more" @click="bookSort(Classify_NewBook.books)"></div>
        </div>
      </div>

      <div class="content type1">
        <router-link
          tag="div"
          :to="'/details?id=' + vl.bookId"
          class="item"
          v-for="(vl, i) in Classify_NewBook.books"
          :key="vl.bookId"
          v-show="i <= 3"
        >
          <div class="img">
            <img :src="vl.imgUrl" alt="" />
          </div>
          <div class="text">
            <div class="tips one-txt-cut">{{ vl.bookName }}</div>
            <div class="author">{{ vl.authorName }}</div>
          </div>
        </router-link>
        <div class="line"></div>
      </div>

      <div class="content type2">
        <router-link
          tag="div"
          :to="'/details?id=' + vl.bookId"
          class="item"
          v-for="(vl, i) in Classify_NewBook.books"
          :key="vl.bookId"
          v-show="i < 7 && i > 3"
        >
          <div class="img">
            <img :src="vl.imgUrl" alt="" />
          </div>
          <div class="text">
            <div class="title">{{ vl.bookName }}</div>
            <div class="tips">{{ vl.desc }}</div>
            <div class="bottom">
              <div class="author">{{ vl.authorName }}</div>
              <div class="type">
                <div>穿越</div>
                <div>{{ vl.tag[0] }}</div>
              </div>
            </div>
          </div>
          <div class="line"></div>
        </router-link>
      </div>
    </div>
    <!-- todo 新书 -->

    <!-- todo 猜你喜欢 -->
    <div class="mblike" v-if="Classify_like">
      <div class="title">
        <div class="left">
          <div class="logo"></div>
          <h3>{{ Classify_like.moduleName }}</h3>
        </div>
        <div class="right">
          <h3>{{ Classify_like.titlebar.rightText }}</h3>
          <div class="more" @click="bookSort(Classify_like.books)"></div>
        </div>
      </div>

      <div class="content type2">
        <router-link
          tag="div"
          class="item"
          v-for="(vl, i) in Classify_like.books"
          :to="'/details?id=' + vl.bookId"
          :key="vl.bookId"
          v-show="i < 4"
        >
          <div class="img">
            <img :src="vl.imgUrl" alt="" />
          </div>
          <div class="text">
            <div class="title">{{ vl.bookName }}</div>
            <div class="tips">{{ vl.desc }}</div>
            <div class="bottom">
              <div class="author">{{ vl.authorName }}</div>
              <div class="type">
                <div>穿越</div>
                <div>{{ vl.tag[0] }}</div>
              </div>
            </div>
          </div>
          <div class="line"></div>
        </router-link>
      </div>
    </div>
    <!-- todo 猜你喜欢 -->
  </div>
</template>

<script>
import { getGirlClassify, getBoyClassify } from "../api/classify";
export default {
  data() {
    return {
      Classify_Good: null,
      Classify_NewBook: null,
      Classify_like: null,
      Classify_title: "",
    };
  },
  methods: {
    getGirlClassifyFun() {
      getGirlClassify().then((data) => {
        // 官方推荐
        this.Classify_Good = data.modulesInfos[0].data;

        // 新书
        this.Classify_NewBook = data.modulesInfos[1].data;

        // 猜你喜欢
        this.Classify_like = data.modulesInfos[2].data;
      });
    },
    getBoyClassifyFun() {
      getBoyClassify().then((data) => {
        // 官方推荐
        this.Classify_Good = data.modulesInfos[0].data;

        // 新书
        this.Classify_NewBook = data.modulesInfos[1].data;

        // 猜你喜欢
        this.Classify_like = data.modulesInfos[2].data;
      });
    },
    // 打乱数组顺序
    bookSort(array) {
      array.sort(() => (Math.random() > 0.5 ? 1 : -1));
    },
  },
  created() {
    if (this.$route.query.type == "girl") {
      this.getGirlClassifyFun();
      this.Classify_title = "女生专区";
    } else if (this.$route.query.type == "boy") {
      this.getBoyClassifyFun();
      this.Classify_title = "男生专区";
    }
  },
};
</script>

<style lang="scss" scoped>
.ClassifyView {
  header.header {
    height: 50px;
    text-align: center;
    border-bottom: 2px solid #f0f0f0;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 100;

    > .left {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 15px;
      margin: auto;
      transform: rotate(180deg);
      background: url(https://easyreadfs.nosdn.127.net/web/trunk/1533607652166/icon_return.png)
        no-repeat;
      background-size: contain;
      width: 12px;
      height: 20px;
    }

    > .h_title {
      color: #333;
      font-weight: bold;
      line-height: 50px;
      font-size: 18px;
    }
  }

  .title {
    height: 22px;
    line-height: 22px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;

    > .left {
      display: flex;

      h3 {
        font-size: 16px;
      }

      > .logo {
        width: 9px;
        height: 23px;
        background: url(../assets/imgs/title_logo.png);
        background-size: 100%;
        margin-right: 5px;
      }
    }

    > .right {
      display: flex;
      align-items: center;

      > .more {
        width: 18px;
        height: 18px;
        background: url(../assets/imgs/title_more.png);
        background-size: 100%;
        margin-left: 4px;
      }
    }

    h3 {
      font-size: 14px;
    }
  }

  .l_type1 {
    background: #fff;
    box-sizing: border-box;
    padding: 20px 16px 10px;

    > .content {
      margin-top: 8px;
      padding-bottom: 8px;

      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      > .item {
        width: 32%;
        margin-bottom: 16px;

        > .img {
          width: 100%;

          > img {
            width: 100%;
            height: 100%;
          }
        }

        > .text {
          height: 36px;
          width: 100%;
          padding-top: 4px;

          > h3 {
            height: 16px;
            font-size: 13px;
            color: #333;
            //   white-space: nowrap;
            //   overflow: hidden;
          }

          > p {
            color: #999;
            font-size: 12px;
            margin-top: 4px;
          }
        }
      }
    }
  }

  .content.type1 {
    padding: 0px 16px;
    display: flex;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;

    > .item {
      width: calc(25%);

      > .img {
        // width: calc(100% - 8px);
        // height: 65%;
        margin: 0 4px;
        position: relative;
        border-radius: 4px;
        overflow: hidden;

        &::after {
          content: "";
          position: absolute;
          width: 200%;
          height: 200%;
          top: 0;
          left: 0;
          border: 1px solid rgba(0, 0, 0, 0.1);
          border-radius: 4px;
          transform: scale(0.5);
          transform-origin: left top;
        }

        > img {
          width: 100%;
          height: 100%;
        }
      }

      > .text {
        box-sizing: border-box;
        padding: 8px 5px 0;
        margin-bottom: 16px;

        > .tips {
          color: #333;
          font-size: 13px;
          line-height: 16px;
          margin: 0;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }

        > .author {
          line-height: 16px;
          color: #a1a1b3;
          margin-top: 4px;
        }
      }
    }
  }

  .content.type2 {
    width: 100%;
    box-sizing: border-box;

    > .item {
      padding: 16px;
      display: flex;
      width: 100%;
      position: relative;
      overflow: hidden;
      box-sizing: border-box;

      > .img {
        width: 68px;
        height: 92px;

        > img {
          width: 100%;
          height: 100%;
        }
      }

      > .text {
        flex: 1;
        margin-left: 16px;

        > .title {
          height: 21px;
          line-height: 21px;
          font-size: 16px;
          margin-bottom: 6px;
        }

        > .tips {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;

          color: #a1a1b3;
          font-size: 12px;
          line-height: 20px;
          margin-bottom: 8px;
        }

        > .bottom {
          display: flex;
          justify-content: space-between;

          > .author {
            color: #a1a1b3;
            font-size: 12px;
          }

          > .type {
            display: flex;
            font-size: 10px;
            transform: scale(0.85);

            > div {
              height: 20px;
              line-height: 20px;
              padding: 0 7px;
              border: 1px solid;
              border-radius: 2px;
              text-align: center;

              &:nth-child(1) {
                margin-right: 5px;
                color: #23b383;
                border-color: rgba(0, 201, 141, 0.3);
              }

              &:nth-child(2) {
                color: #a1a1b3;
                border-color: #e6e6ed;
              }
            }
          }
        }
      }
    }
  }

  .line {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 1px;
    transform: scaleY(0.5);
    border-bottom: 1px solid #e6e6ed;
  }

  .mblike,
  .newlist {
    margin-top: 8px;
    background: #fff;

    > .title {
      margin: 0;
      padding: 20px 16px 16px;

      h3 {
        color: #333;
      }
    }
  }
}
</style>